<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>熙心健康体检系统 - 预约列表</title>

  <style>

      /* 全局样式初始化 */

      * {

          margin: 0;

          padding: 0;

          box-sizing: border-box;

          font-family: "Microsoft YaHei", sans-serif;

      }

 

      body {

          background-color: #f5f7fa;

      }

 

      /* 侧边栏样式 */

      .sidebar {

          width: 220px;

          height: 100vh;

          background-color: #2f3b4b;

          color: #fff;

          padding: 20px 0;

          position: fixed; /* 固定侧边栏 */

      }

 

      .sidebar-header {

          font-size: 18px;

          text-align: center;

          margin-bottom: 30px;

          font-weight: bold;

      }

 

      .sidebar-menu {

          list-style: none;

      }

 

      .sidebar-menu li {

          padding: 12px 20px;

          margin: 5px 0;

          cursor: pointer;

          transition: background 0.3s;

      }

 

      .sidebar-menu li:hover {

          background-color: #1f2d3d;

      }

 

      .sidebar-menu li.active {

          background-color: #1f2d3d;

      }

 

      /* 主内容区域 */

      .main {

          margin-left: 220px;

          padding: 20px;

      }

 

      /* 顶部导航 */

      .top-nav {

          font-size: 14px;

          color: #666;

          margin-bottom: 10px;

      }

 

      /* 搜索表单 */

      .search-form {

          background-color: #fff;

          padding: 20px;

          border-radius: 6px;

          margin-bottom: 20px;

          box-shadow: 0 0 8px rgba(0,0,0,0.05);

      }

 

      .form-row {

          display: flex;

          align-items: center;

          margin-bottom: 15px;

      }

 

      .form-row label {

          width: 80px;

          text-align: right;

          margin-right: 10px;

          color: #333;

      }

 

      .form-row input,

      .form-row select {

          flex: 1;

          padding: 8px;

          border: 1px solid #ddd;

          border-radius: 4px;

          max-width: 300px;

      }

 

      .radio-group {

          display: flex;

          align-items: center;

          margin-left: 90px;

      }

 

      .radio-group label {

          margin-right: 20px;

          color: #333;

      }

 

      .search-btn {

          margin-left: 90px;

          padding: 8px 20px;

          background-color: #009688;

          color: #fff;

          border: none;

          border-radius: 4px;

          cursor: pointer;

      }

 

      /* 表格样式 */

      .table-container {

          background-color: #fff;

          border-radius: 6px;

          box-shadow: 0 0 8px rgba(0,0,0,0.05);

          overflow-x: auto; /* 处理表格溢出 */

      }

 

      .table-container table {

          width: 100%;

          border-collapse: collapse;

      }

 

      .table-container th,

      .table-container td {

          padding: 12px;

          border-bottom: 1px solid #eee;

          text-align: center;

          font-size: 14px;

      }

 

      .table-container th {

          background-color: #f8f9fa;

          font-weight: bold;

      }

 

      .operation-btn {

          color: #009688;

          cursor: pointer;

          margin: 0 5px;

      }

 

      /* 系统信息栏 */

      .system-info {

          position: fixed;

          top: 20px;

          right: 20px;

          font-size: 14px;

          color: #333;

          background: #fff;

          padding: 8px 15px;

          border-radius: 4px;

          box-shadow: 0 0 5px rgba(0,0,0,0.1);

      }

 

      .logout-btn {

          color: #f44336;

          margin-left: 10px;

          cursor: pointer;

          font-weight: bold;

      }

     

      .logout-btn:hover {

          text-decoration: underline;

      }

​  

​​   .header{

​​   8

​​   width: 100%;

​​   9

​​   height: 60px；

​​   10

​​   background-color: #373d41;｝

​   }

  </style>

</head>

<body>

  <!-- 侧边栏 -->

  <aside class="sidebar">

      <div class="sidebar-header">熙心健康体检系统</div>

      <ul class="sidebar-menu">

          <li onclick="goToPage('shouye.html')">首页</li>

          <li onclick="goToPage('tijian.html')">体检预约</li>

          <li class="active" onclick="goToPage('yuyue.html')">预约列表</li>

          <li onclick="goToPage('chaxun.html')">体检客户查询</li>

      </ul>

  </aside>

 

  <!-- 系统信息栏 -->

  <div class="system-info">

      系统管理员：admin

      <span class="logout-btn" id="logoutBtn">OUT</span>

  </div>

 

  <!-- 主内容 -->

  <div class="main">

      <!-- 顶部导航 -->

      <div class="top-nav">预约 / 预约列表</div>

     

      <!-- 搜索表单 -->

      <div class="search-form">

          <h3 style="margin-bottom: 15px;">体检客户查询</h3>

          <div class="form-row">

              <label for="phone">手机号</label>

              <input type="text" id="phone" placeholder="输入搜索的手机号">

          </div>

          <div class="form-row">

              <label for="name">姓名</label>

              <input type="text" id="name" placeholder="输入预约体检的客户信息">

          </div>

          <div class="form-row">

              <label for="gender">性别</label>

              <select id="gender">

                  <option value="">选择性别</option>

                  <option value="male">男</option>

                  <option value="female">女</option>

              </select>

          </div>

          <div class="form-row">

              <label for="hospital">预约院区</label>

              <select id="hospital">

                  <option value="">选择医院地址</option>

                  <option value="yuhang">熙康云医院-华特院区</option>

              </select>

          </div>

          <div class="form-row">

              <label for="customer-type">套餐类型</label>

              <select id="customer-type">

                  <option value="">预约套餐</option>

                  <option value="235">235t东家庭已婚女士套餐C</option>

              </select>

          </div>

          <div class="form-row">

              <label for="check-time">体检时间</label>

              <input type="text" id="check-time" placeholder="Pick a day">

          </div>

          <div class="radio-group">

              <label><input type="radio" name="archived" checked> 未归档</label>

              <label><input type="radio" name="archived"> 已归档</label>

          </div>

          <button class="search-btn">查询</button>

      </div>

 

      <!-- 数据表格 -->

      <div class="table-container">

          <table>

              <thead>

                  <tr>

                      <th>订单编号</th>

                      <th>客户姓名</th>

                      <th>客户手机号</th>

                      <th>预约院区</th>

                      <th>预约套餐</th>

                      <th>预约时间</th>

                      <th>报告归档</th>

                      <th>操作</th>

                  </tr>

              </thead>

              <tbody>

                  <!-- 模拟数据行，与截图完全一致 -->

                  <tr>

                      <td>2023100256211023</td>

                      <td>张一山</td>

                      <td>13100000000</td>

                      <td>熙康云医院-华特院区</td>

                      <td>235t东家庭已婚女士套餐C</td>

                      <td>2015-02-12</td>

                      <td>已归档</td>

                      <td>

                          <span class="operation-btn">取消预约</span>

                          <span class="operation-btn">编辑</span>

                      </td>

                  </tr>

                  <tr>

                      <td>2023100256211023</td>

                      <td>张一山</td>

                      <td>13100000000</td>

                      <td>熙康云医院-华特院区</td>

                      <td>235t东家庭已婚女士套餐C</td>

                      <td>2015-02-12</td>

                      <td>已归档</td>

                      <td>

                          <span class="operation-btn">取消预约</span>

                          <span class="operation-btn">编辑</span>

                      </td>

                  </tr>

                  <tr>

                      <td>2023100256211023</td>

                      <td>张一山</td>

                      <td>13100000000</td>

                      <td>熙康云医院-华特院区</td>

                      <td>235t东家庭已婚女士套餐C</td>

                      <td>2015-02-12</td>

                      <td>已归档</td>

                      <td>

                          <span class="operation-btn">取消预约</span>

                          <span class="operation-btn">编辑</span>

                      </td>

                  </tr>

                  <tr>

                      <td>2023100256211023</td>

                      <td>张一山</td>

                      <td>13100000000</td>

                      <td>熙康云医院-华特院区</td>

                      <td>235t东家庭已婚女士套餐C</td>

                      <td>2015-02-12</td>

                      <td>已归档</td>

                      <td>

                          <span class="operation-btn">取消预约</span>

                          <span class="operation-btn">编辑</span>

                      </td>

                  </tr>

                  <tr>

                      <td>2023100256211023</td>

                      <td>张一山</td>

                      <td>13100000000</td>

                      <td>熙康云医院-华特院区</td>

                      <td>235t东家庭已婚女士套餐C</td>

                      <td>2015-02-12</td>

                      <td>已归档</td>

                      <td>

                          <span class="operation-btn">取消预约</span>

                          <span class="operation-btn">编辑</span>

                      </td>

                  </tr>

                  <tr>

                      <td>2023100256211023</td>

                      <td>张一山</td>

                      <td>13100000000</td>

                      <td>熙康云医院-华特院区</td>

                      <td>235t东家庭已婚女士套餐C</td>

                      <td>2015-02-12</td>

                      <td>已归档</td>

                      <td>

                          <span class="operation-btn">取消预约</span>

                          <span class="operation-btn">编辑</span>

                      </td>

                  </tr>

                  <tr>

                      <td>2023100256211023</td>

                      <td>张一山</td>

                      <td>13100000000</td>

                      <td>熙康云医院-华特院区</td>

                      <td>235t东家庭已婚女士套餐C</td>

                      <td>2015-02-12</td>

                      <td>已归档</td>

                      <td>

                          <span class="operation-btn">取消预约</span>

                          <span class="operation-btn">编辑</span>

                      </td>

                  </tr>

              </tbody>

          </table>

      </div>

  </div>

 

  <script>

      // 页面跳转函数

      function goToPage(pageUrl) {

          window.location.href = pageUrl;

      }

 

      // 退出功能

      document.getElementById('logoutBtn').addEventListener('click', function() {

          // 确认对话框

          if(confirm('确定要退出登录吗？')) {

              // 这里可以添加清除登录状态的代码，例如：

              // localStorage.removeItem('token');

              // 然后跳转到管理员登录页面

              window.location.href = 'admin.html'; // 替换为你的管理员登录页面路径

          }

      });

  </script>

</body>

</html>

